import React, {Component} from 'react';
import {Link} from 'react-router';
import {connect}from 'react-redux';
import {Input,Radio,Button,Table, message} from 'antd';

export default class TableDemo extends Component {
    constructor(props){
        super(props);
        this.state={
            columns:[{
                title: 'name',
                dataIndex: 'name',
                width: '25%',
              }, {
                title: 'age',
                dataIndex: 'age',
                width: '15%',
              }, {
                title: 'amount',
                dataIndex: 'amount',
                render: (text, record) => {
                    return <Input value={text} onChange={(e) => this.handleChange(e,record)} />
                },
              }],
            data:[{id:1,name:'123',age:12,amount:0},
            {id:2,name:'456',age:12,amount:0},
            {id:3,name:'789',age:12,amount:0},
            {id:4,name:'159',age:12,amount:0},
            {id:6,name:'357',age:12,amount:0},]
        };
    }
    handleChange(e,record){
        const val = e.target.value;
        if(!isNaN(val)){
            const newData = [...this.state.data];
            const target = newData.filter(item => record.id === item.id)[0];
            for(let i in newData){
                if(newData[i].id == record.id){
                    let tmp = val;
                    if(val.indexOf('.') != -1){
                        let num = val.split('.')[1].length;
                        if(num > 2){
                            tmp = Number(val).toFixed(2);
                        }
                    }
                    newData[i].amount = tmp;
                    target['amount'] = tmp;
                }
            }
            this.setState({
                data:newData,
            })
        }
    }

    render(){
        const {data,columns} = this.state;
        return <Table bordered dataSource={data} columns={columns} />;
    }
}